<template>
  <div>
    fileComponent--{{ fileName }}
    <input type="file" @change="changeFile">
  </div>
  
</template>
<script lang="ts" setup>
import {ref, watch} from 'vue'
let {modelValue} = defineProps(['modelValue'])
const emits = defineEmits(['update:modelValue'])
console.log('---modelValue---',modelValue)
const fileName = ref('')
watch(() => modelValue,(val) => {
  fileName.value = val
}, {immediate: true})
const changeFile = (e: Event) => {
  console.log(e)
  const files = (e.target as HTMLInputElement)?.files || []
  fileName.value = files.length>0?files[0].name: ''
  emits('update:modelValue', fileName.value)
}
</script>